<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="1200px" append-to-body custom-class="import-dialog">
      <div class="app-container">
        <div class="handle-button">
          <el-button @click="addInspection">新增验房</el-button>
          <el-button @click="addSweep">新增打扫</el-button>
          <el-button @click="addSweepInspection">同一人验房打扫</el-button>
        </div>

        <div class="tab-button">
          <el-radio-group v-model="tabPosition" @change="changeTabs">
            <el-radio-button label="1">验房单</el-radio-button>
            <el-radio-button label="2">打扫单</el-radio-button>
          </el-radio-group>
        </div>
        <component :is='componentName' ref="component" :orderInfo="orderInfo"></component>
      </div>
      <!-- <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div> -->
      <AddInspection v-model="addInspectionVisible" :orderInfo="orderInfo" @success="getList" />
      <AddSweep v-model="addSweepVisible" :orderInfo="orderInfo" @success="getList" />
      <AddSweepInspection v-model="addSweepInspectionVisible" :orderInfo="orderInfo" @success="getList" />
    </el-dialog>
  </div>
</template>

<script>
import inspection from "./inspection"
import sweep from "./sweep"
import AddInspection from "./inspection/add"
import AddSweep from "./sweep/add"
import AddSweepInspection from "./components/add-sweep-inspection"
export default {
  components: {
    inspection,
    AddInspection,
    sweep,
    AddSweep,
    AddSweepInspection
  },
  props: {
    title: {
      default: "打扫验房",
    },
    value: {
      default: false,
    },
    orderInfo:{
      default:{}
    }
  },
  dicts: ["dict_unsubscribe_rule_type"],
  data() {
    return {
      visible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        estateId: undefined,
        apartmentType: undefined,
        editStatus: undefined,
        apartmentState: undefined,
        updateBy: undefined,
        communityId: undefined,
        estateName: '',
        region: [],
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: [],
      tabPosition: 1,
      componentName: 'inspection',
      addInspectionVisible:false,
      addSweepVisible:false,
      addSweepInspectionVisible:false
    };
  },
  computed: {
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init();
      }
      this.visible = newVal; // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit("input", val); // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  methods: {
    init() {
      console.log('orderInfo',this.orderInfo);
      this.reset()
      this.$nextTick(()=>{
        this.getList()
      })

    },
    reset() {
      this.tabPosition = 1
      this.componentName = 'inspection'
      this.queryParams = {
      }
    },
    changeTabs(data) {
      if (data == 1) {
        this.componentName = 'inspection'
      } else {
        this.componentName = 'sweep'
      }
    },
    //新增验房
    addInspection(){
      this.addInspectionVisible = true
    },
    //新增打扫
    addSweep(){
      this.addSweepVisible = true
    },
    //新增同一人验房打扫
    addSweepInspection(){
      this.addSweepInspectionVisible = true
    },
    getList(){
      this.$refs.component.getList()
    },
    submitForm() {
      let list = JSON.parse(JSON.stringify(this.selectList))
      this.$emit('success', list)
      this.reset();
      this.visible = false
    },
    cancel() {
      this.reset();
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog.scss";

.tab-button {
  margin: 30px 0;
}
</style>
